{extend name="public/base"/}
{block name="css"}

{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">修改密码</span>
    </template>
</van-nav-bar>
<van-form @submit="onSubmit">
    <van-cell-group>
        <van-field
                v-model="form.old_password"
                type="password"
                label="旧密码"
                placeholder="请输入旧密码，首次修改请放空"
        ></van-field>
        <van-field
                v-model="form.new_password"
                type="password"
                label="新密码"
                required
                placeholder="大于6位且包含字母和数字"
                :rules="[{ required: true, message: '请输入新密码' }]"
        ></van-field>
        <van-field
                v-model="form.renew_password"
                type="password"
                label="确认密码"
                required
                placeholder="与新密码一致"
                :rules="[{ required: true, message: '请输入确认密码' }]"
        ></van-field>
    </van-cell-group>
    <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
            提交
        </van-button>
    </div>
</van-form>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.onBack = () => {
            location.href = "{:url('my/index')}";
        };

        base.form = Vue.reactive({old_password:'',new_password:'',renew_password:''});
        base.onSubmit = () => {
            if (base.form.new_password !== base.form.renew_password) {
                vant.showToast('两次密码不一样');
                return false;
            }

            postJson('/my/passwordPost',base.form).then(()=>{
                location.href = "{:url('my/index')}";
            });
        };

        return base;
    }
</script>
{/block}